<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="col-lg-6">
            <table class="table  table-bordered">
                <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>成绩</th>
                    </tr>
                </thead>
                <tbody class="table-striped"></tbody>
            </table>
            <!-- 分页 -->
            <nav aria-label="Page navigation">
                <ul class="pagination"></ul>
            </nav>
        </div>
    </div>

    <script>
        const data = [
            { id: 1, name: '钱洋', age: 22, gender: '女', score: 81 }
            , { id: 2, name: '吕刚', age: 21, gender: '女', score: 92 }
            , { id: 3, name: '余秀兰', age: 20, gender: '男', score: 71 }
            , { id: 4, name: '廖娜', age: 18, gender: '男', score: 40 }
            , { id: 5, name: '任洋', age: 18, gender: '男', score: 87 }
            , { id: 6, name: '薛秀英', age: 16, gender: '女', score: 68 }
            , { id: 7, name: '戴勇', age: 20, gender: '男', score: 82 }
            , { id: 8, name: '余平', age: 22, gender: '男', score: 68 }
            , { id: 9, name: '龙明', age: 17, gender: '男', score: 47 }
            , { id: 10, name: '刘磊', age: 22, gender: '男', score: 66 }
            , { id: 11, name: '吕芳', age: 22, gender: '女', score: 86 }
            , { id: 12, name: '汪军', age: 21, gender: '男', score: 91 }
            , { id: 13, name: '江静', age: 17, gender: '男', score: 79 }
            , { id: 14, name: '文伟', age: 21, gender: '女', score: 95 }
            , { id: 15, name: '邹艳', age: 22, gender: '女', score: 96 }
            , { id: 16, name: '阎敏', age: 16, gender: '男', score: 68 }
            , { id: 17, name: '徐磊', age: 19, gender: '女', score: 51 }
            , { id: 18, name: '薛秀兰', age: 18, gender: '女', score: 51 }
            , { id: 19, name: '余勇', age: 20, gender: '女', score: 77 }
            , { id: 20, name: '万涛', age: 21, gender: '女', score: 85 }
            , { id: 21, name: '蔡杰', age: 18, gender: '女', score: 88 }
            , { id: 22, name: '任强', age: 17, gender: '女', score: 73 }
            , { id: 23, name: '李杰', age: 20, gender: '男', score: 48 }
            , { id: 24, name: '万敏', age: 16, gender: '女', score: 95 }
            , { id: 25, name: '文洋', age: 20, gender: '女', score: 47 }
            , { id: 26, name: '常霞', age: 17, gender: '男', score: 89 }
            , { id: 27, name: '黄杰', age: 20, gender: '女', score: 81 }
        ];
        const tbody = document.querySelector('tbody');
        const pagination = document.querySelector('.pagination');// 分页 ul

        function render(arr) {
            tbody.innerHTML = arr.map(item => `
                <tr>
                    <td>${item.id}</td>    
                    <td>${item.name}</td>    
                    <td>${item.age}</td>    
                    <td>${item.gender}</td>    
                    <td>${item.score}</td>    
                </tr>
            `).join('');
        }
        render(data.slice(0, 10));

        // 分页样式
        let currentPage = 1, // 当前页数
            totalPage = Math.ceil(data.length / 10); // 需要多少页;

        function paging() {
            // console.log('paging 里的 currentPage', currentPage);
            let prevStr = `
                <li>
                    <a href="#" aria-label="Previous" data-number=${currentPage} id='prevBtn'>&laquo;</a>
                </li>
            `;
            let nextStr = `
                <li>
                    <a href="#" aria-label="Next" data-number=${currentPage} id='nextBtn'>&raquo;</a>
                </li>    
            `;

            let str = '';
            for (let i = 1; i <= totalPage; i++) {
                str += `<li><a href="#">${i}</a></li>`;
            }
            pagination.innerHTML = prevStr + str + nextStr;
        }
        paging();

        // 分页点击
        pagination.onclick = function (event) {
            let btn = event.target, // 按钮
                num = btn.innerText, // 按钮身上的数字
                arr = null;

            if (parseInt(btn.innerText)) {
                currentPage = btn.innerText;  // 按钮身上的数字作为当前数字
                /*
                    1: slice(0, 10)
                    2: slice(10, 20)
                    3: slice(20, 30)
                */
                arr = data.slice((num - 1) * 10, num * 10);
                render(arr);
                paging();
                return;
            }
            // console.log(btn.innerText);
            if (btn.innerText == '«') {
                if (btn.dataset.number > 1) { // 可以前翻
                    num = currentPage - 1; // 渲染的页数
                    currentPage -= 1; // 当前页数 -1 
                    arr = data.slice((num - 1) * 10, num * 10);
                    render(arr);
                    paging();
                }
            } else if (btn.innerText == '»') {
                if (btn.dataset.number < totalPage) {
                    num = currentPage - 0 + 1; // 渲染的页数
                    currentPage += 1; // 当前页数 +1 
                    arr = data.slice((num - 1) * 10, num * 10);
                    render(arr);
                    paging();
                }
            }
        }


    </script>
</body>

</html>